<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<style>
			.flex-between {
				display: flex;
				direction: row;
				align-items: center;
				justify-content: space-between;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div style="padding: 10px 20px;" class="flex-between">
				<div>
					<h3>
						<span id="province">辽宁</span>
						-
						<span id="city">沈阳</span>
					</h3>
				</div>
				<div>
					<button type="button" class="mui-btn mui-btn-red" id="switchCityBtn">切换城市</button>
				</div>
			</div>
			<hr style="margin-top: -5px;" />
			<div id="weatherList">

			</div>
		</div>
		<script type="text/javascript" src="../js/lib/mui.min.js"></script>
		<script type="text/javascript" src="../js/lib/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/lib/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/lib/city.data.js"></script>
		<script type="text/javascript" src="../js/lib/city.data-3.js"></script>
		<script type="text/javascript" src="../js/util.js"></script>
		<script type="text/javascript" src="../js/lib/jbase64.js"></script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					dragHandler(2);
					getWether('辽宁', '沈阳');
				});
				$.ready(function() {
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('switchCityBtn');
					var provinceSpan = doc.getElementById('province');
					var citySpan = doc.getElementById('city');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							provinceSpan.textContent = items[0].text;
							citySpan.textContent = items[1].text;
							getWether(items[0].text.replace("省", '').replace("市", ''), items[1].text.replace("市", ''));
						});
					}, false);
				});

			})(mui, document);

			function getWether(p, c) {
				plus.nativeUI.showWaiting();
				mui.get('http://c.m.163.com/nc/weather/' + BASE64.encoder(p + "|" + c) + '.html', {}, function(data) {
					var wd = data[p + '|' + c];
					var html = '';
					for(i = 0; i < wd.length; i++) {
						html += '<div class="mui-card">' +
							'<div class="mui-card-header">' +
							'<div>' + wd[i].date + ' ' + wd[i].week + '</div>' +
							'<div>' + wd[i].nongli + '</div>' +
							'</div>' +
							'<div class="mui-card-content">' +
							'<div class="mui-card-content-inner flex-between">' +
							'<div>' + wd[i].climate + ' ' + wd[i].wind + '</div>' +
							'<div>' + wd[i].temperature + '</div>' +
							'</div>' +
							'</div>' +
							'</div>';
					}
					document.getElementById('weatherList').innerHTML = html;
					plus.nativeUI.closeWaiting();
				}, 'json');
			}
		</script>
	</body>

</html>